<template>
  <div class="card-details" :class="{
    'card-details-enter': isVisible && !isClosing,
    'card-details-exit': isClosing,
    'card-details-hidden': !isVisible && !isClosing
  }" @transitionend="handleTransitionEnd">
    <div class="card-details-header" v-if="Object.keys(cardDetailsData).length > 0">
      <van-icon name="arrow-left" class="close-icon" @click="closeDetails" />
      <div class="right">
        <div class="like">
          <i class="one-icon" :class="cardDetailsData.isLiked ? 'one-icon-liked' : 'one-icon-like'"
            @click="toggleLike(cardDetailsData)"></i>
          <span>{{ cardDetailsData.praisenum }}</span>
        </div>
        <i class="one-icon one-icon-download"></i>
      </div>
    </div>

    <div class="card-details-content" v-if="Object.keys(cardDetailsData).length > 0">
      <div class="card-img">
        <img :src="cardDetailsData.img_url" alt="">
      </div>
      <div class="time-postion" v-if="cardDetailsData.input_date">{{ formatDate(cardDetailsData.input_date) }} | {{
        cardDetailsData.addr ? cardDetailsData.addr : '未知' }}</div>
      <div class="details-text" v-html="cardDetailsData.content.replace(/\n/g, '<br>')" v-if="cardDetailsData.content">
      </div>
    </div>

    <div v-if="Object.keys(cardDetailsData).length == 0" class="loading">加载中...</div>
  </div>
</template>

<script>
import { Icon } from 'vant'

export default {
  name: 'NoteDetail',
  components: {
    [Icon.name]: Icon
  },
  props: {
    cardData: {
      type: Object,
      default: () => ({})
    },
    isVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cardDetailsData: {}, // 当前展示的卡片详情数据
      isClosing: false // 是否处于关闭动画状态
    }
  },
  watch: {
    // 监听卡片数据变化，更新详情内容
    cardData: {
      handler(newData) {
        if (newData && Object.keys(newData).length > 0) {
          this.cardDetailsData = { ...newData };
        }
      },
      immediate: true,
      deep: true
    },
    // 可见状态切换时重置关闭标记
    isVisible(newVal) {
      if (newVal) {
        this.isClosing = false;
      }
    }
  },
  methods: {
    // 点击关闭按钮触发退出动画
    closeDetails() {
      this.isClosing = true;
    },

    // 动画结束后清空数据并通知父组件
    handleTransitionEnd() {
      if (this.isClosing) {
        this.isClosing = false;
        this.cardDetailsData = {};
        this.$emit('close');
      }
    },

    // 将日期格式化为 yyyy.MM.dd
    formatDate(dateStr) {
      return dateStr.split(' ')[0].replace(/-/g, '.');
    },

    // 点赞/取消点赞当前卡片
    toggleLike(item) {
      if (item.isLiked) {
        item.praisenum--;
      } else {
        item.praisenum++;
      }
      item.isLiked = !item.isLiked;
    }
  }
}
</script>

<style scoped lang="less">
.card-details {
  width: 100%;
  height: 100vh;
  padding-bottom: 15vh;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  background-color: #fff;
  touch-action: none;
  transition: transform 0.3s ease-out;

  &.card-details-hidden {
    transform: translateY(100vh);
    display: none;
  }

  &.card-details-enter {
    transform: translateY(0);
    display: block;
  }

  &.card-details-exit {
    transform: translateX(100vw);
  }

  .card-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 7vh;
    width: 100%;
    padding: 0 2vw;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    .close-icon {
      font-size: 14px;
      color: #ccc;
      cursor: pointer;
    }

    .right {
      display: flex;
      align-items: center;
      gap: 3vw;

      >i {
        font-size: 14px;
      }

      .like {
        display: flex;
        align-items: center;
        gap: 1vw;

        span {
          font-size: 8px;
        }
      }
    }
  }

  .card-details-content {
    margin-top: 7vh;
    width: 100%;
    height: calc(100vh - 7vh);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    box-sizing: border-box;

    .card-img {
      width: 100%;

      img {
        width: 100%;
      }
    }

    .time-postion {
      font-size: 8px;
      color: #aaa;
      display: flex;
      justify-content: flex-start;
      margin: 1vh;
      padding-left: 2vw;
    }

    .details-text {
      width: 100%;
      font-size: 12px;
      font-weight: 300;
      line-height: 2;
      display: flex;
      justify-content: flex-start;
      margin-top: 5vh;
      padding: 5vh 4vw;
      box-sizing: border-box;
      text-align: left;
    }
  }
}

.loading {
  width: 100%;
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: #999;
}
</style>